<template>
  <div>
    <el-table :data="tableData" style="width: 100%;" border>
      <el-table-column
        type="index"
        width="50"
        align="center"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in datalist"
        :key="index"
        :label="item.label"
        :align="item.align"
        :prop="item.prop"
      ></el-table-column>
      <el-table-column label="是否显示" align="center">
        <template slot-scope="scope">
        <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeStatus(scope.row)"
            style="margin-left:10px"></el-switch>
        </template> 
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const datalist = [
  { prop: "content", label: "内容", width: "300", align: "left" },
  { prop: "time", label: "时间", width: "200", align: "center" },
  { prop: "ip", label: "ip", width: "300", align: "center" },
  { prop: "ipSource", label: "ipSource", align: "center" },
];
import { getAllMessages, deleteMessage, showMessage } from "@/api/messages";
export default {
  data() {
    return {
      tableData: [],
      value: true,
      datalist,
    };
  },
  methods: {
    handleDelete(row) {
      deleteMessage(row.id)
        .then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 1000,
          });
          this._getAllMessages();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    _getAllMessages() {
      getAllMessages().then((res) => {
        const { data } = res;
        let datas = data.slice().reverse();
        // console.log(datas);
        this.tableData = datas;
        this.tableData.forEach((item)=>{
          item.time = this.my_methods.filterTime(item.time);
          item.status = item.status == 1 ? true : false;
        })
      });
    },
    changeStatus(row){
      row.status = row.status == true ? 1 : 0;
      showMessage(row.id, row.status).then((res)=>{
        // console.log(res);
        this._getAllMessages();
      })
    }
  },
  created() {
    this._getAllMessages();
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep th {
    height: 40px;
    padding: 0;
    text-align: center;
  }
  ::v-deep td {
    height: 40px;
    padding: 0;
  }
}
</style>